/**
 * *@describe vue-cli 4.x配置文件
 */

const path = require("path");
const CompressionPlugin = require("compression-webpack-plugin");
// const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
//   .BundleAnalyzerPlugin;

function resolve(dir) {
  return path.join(__dirname, dir);
}
console.log("打印环境变量");
console.log(process.env.NODE_ENV);
module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
  // 输出文件目录

  outputDir: "dist",
  // eslint-loader 是否在保存的时候检查
  lintOnSave: false,
  // 生产环境是否生成 sourceMap 文件，一般情况不建议打开
  productionSourceMap: false,
  // webpack-dev-server 相关配置 https://webpack.js.org/configuration/dev-server/
  devServer: {
    host: "localhost",
    port: 8080, // 端口号
    https: false, // https:{type:Boolean}
    open: true, // 配置自动启动浏览器  http://192.168.0.1
    hotOnly: true, // 热更新
    overlay: {
      warnings: true,
      errors: true
    }
    // proxy: {
    // "/api": {
    //   target:
    //     "https://www.easy-mock.com/mock/5bc75b55dc36971c160cad1b/sheets", // 目标代理接口地址
    //   secure: false,
    //   changeOrigin: true, // 开启代理，在本地创建一个虚拟服务端
    //   // ws: true, // 是否启用websockets
    //   pathRewrite: {
    //     "^/api": "/"
    //   }
    // }
    // }
  },
  chainWebpack: config => {
    //  设置路径别名
    config.resolve.alias
      .set("@", resolve("src"))
      .set("assets", resolve("src/assets"))
      .set("components", resolve("src/components"));

    const externals = {
      // 'axios': 'axios',
      // 'qs': 'qs',
      vue: "Vue",
      "vue-router": "VueRouter",
      vuex: "Vuex"
      // 'vant': 'Vant'
    };
    const cdn = {
      css: [
        // vant-ui css
        // 'https://cdn.jsdelivr.net/npm/vant@2.0.7/lib/index.css'
      ],
      js: [
        // axios
        // '//cdn.jsdelivr.net/npm/axios@0.19.0/index.min.js',
        // qs
        // '//cdn.jsdelivr.net/npm/qs@6.7.0/lib/index.min.js',
        // vue
        "//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js",
        // vue-router
        "//cdn.jsdelivr.net/npm/vue-router@3.2.0/dist/vue-router.min.js",
        // vuex
        "//cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js"
        // vant
        // 'https://cdn.jsdelivr.net/npm/vant@2.0.7/lib/index.min.js'
      ]
    };
    if (process.env.NODE_ENV === "production") {
      // 为生产环境修改配置...process.env.NODE_ENV !== 'development'
      config.externals(externals);
      config.plugin("html").tap(args => {
        args[0].cdn = cdn;
        return args;
      });
    } else {
      // 为开发环境修改配置...
    }
  },

  // 调整 webpack 配置 https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F
  configureWebpack: config => {
    // 生产and测试环境
    const pluginsPro = [
      // 文件开启Gzip，也可以通过服务端(如：nginx)(https://github.com/webpack-contrib/compression-webpack-plugin)
      new CompressionPlugin({
        filename: "[path].gz[query]",
        algorithm: "gzip",
        test: new RegExp("\\.(" + ["js", "css"].join("|") + ")$"),
        threshold: 8192, // 只处理比这个值大的资源。按字节计算
        minRatio: 0.8, // 只有压缩率比这个值小的资源才会被处理
        deleteOriginalAssets: false // 是否删除原文件
      })
      // Webpack包文件分析器(https://github.com/webpack-contrib/webpack-bundle-analyzer)
      // new BundleAnalyzerPlugin() // 使用默认配置
      // 默认配置的具体配置项
      // new BundleAnalyzerPlugin({
      //   analyzerMode: 'server',
      //   analyzerHost: '127.0.0.1',
      //   analyzerPort: '8888',
      //   reportFilename: 'report.html',
      //   defaultSizes: 'parsed',
      //   openAnalyzer: true,
      //   generateStatsFile: false,
      //   statsFilename: 'stats.json',
      //   statsOptions: null,
      //   excludeAssets: null,
      //   logLevel: info
      // })
    ];
    // 开发环境
    const pluginsDev = [
      // 移动端模拟开发者工具(https://github.com/diamont1001/vconsole-webpack-plugin  https://github.com/Tencent/vConsole)
      // new vConsolePlugin({
      //   filter: [], // 需要过滤的入口文件
      //   enable: true // 发布代码前记得改回 false
      // })
    ];
    if (process.env.NODE_ENV === "production") {
      // 为生产环境修改配置
      config.plugins = [...config.plugins, ...pluginsPro];
      // webpack v4 默认压缩工具 https://github.com/terser/terser#compress-options https://webpack.js.org/plugins/terser-webpack-plugin/
      config.optimization.minimizer.map(arg => {
        const option = arg.options.terserOptions.compress;
        option.drop_console = true; // 生产环境移除console
        return arg;
      });
    } else {
      // 为开发环境修改配置...
      config.plugins = [...config.plugins, ...pluginsDev];
    }
  }
};
